<!--  -->
<template>
  <div class="box">
    <div class="head">
      <span class="back" @click="back">返回</span>
      <span class="title">股权质押分布统计</span>
    </div>
    <div class="tag clear">
      <span
        class="item fl"
        :class="{ cur: type == 'broker' }"
        @click="type = 'broker'"
        >证券公司</span
      >
      <span
        class="item fl"
        :class="{ cur: type == 'bank' }"
        @click="type = 'bank'"
        >银行</span
      >
    </div>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>质押机构</td>
          <td class="cur" @click="tagSort(keys[0])">
            质押公司数量<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 0"
            ></i>
          </td>
          <td class="cur" @click="tagSort(keys[1])">
            质押笔数<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 1"
            ></i>
          </td>
          <td class="cur" @click="tagSort(keys[2])">
            质押数量(股)<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 2"
            ></i>
          </td>
          <td class="cur" @click="tagSort(keys[3])">
            未达预警线比例(%)<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 3"
            ></i>
          </td>
          <td class="cur" @click="tagSort(keys[4])">
            达到预警线未达<br />平仓线比例(%)<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 4"
            ></i>
          </td>
          <td class="cur" @click="tagSort(keys[5])">
            达到平仓线比例(%)<i
              class="icon"
              :class="['down', 'up'][sequence]"
              v-show="cur == 5"
            ></i>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in tableData" :key="item.id">
          <td>{{ i + 1 }}</td>
          <td>{{ item.sname }}</td>
          <td>{{ item.scode_count }}</td>
          <td>{{ item.pledge_count }}</td>
          <td>{{ item.zy_sum }}</td>
          <td>{{ item.under_warn_rate }}</td>
          <td>{{ item.over_warn_rate }}</td>
          <td>{{ item.pcx_rate }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { organization } from "../api/index";
import { numberFormat } from "../script/utils";

export default {
  data() {
    return {
      sequence: 0,
      cur: 0,
      tableData: [],
      type: "broker",
      types: {
        bank: "银行",
        broker: "券商信托",
      },
      params: {
        type: "券商信托",
        field: "scode_count",
        sort: "desc",
        pageNo: 1,
      },
      keys: [
        "scode_count",
        "pledge_count",
        "zy_sum",
        "under_warn_rate",
        "over_warn_rate",
        "pcx_rate",
      ],
    };
  },

  components: {},
  beforeRouteEnter(to, from, next) {
    const { type } = to.params;
    next((vm) => {
      vm.type = type;
      vm.params.type = vm.types[type];
      vm.getPage();
    });
  },
  watch: {
    type() {
      this.params.type = this.types[this.type];
      this.getPage();
    },
  },

  computed: {},

  mounted() {},

  methods: {
    back() {
      this.$router.push({ name: "home" });
    },
    tagSort(key) {
      this.sequence = this.keys[this.cur] == key ? +!this.sequence : 0;
      const index = this.keys.indexOf(key);
      this.cur = index;
      this.params.field = key;
      this.params.sort = ["desc", "asc"][this.sequence];
      this.getPage();
    },
    async getPage() {
        let multiple  =100;
      await organization(this.params).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.tableData = data.map((item) => ({
            sname: item.sname,
            scode_count: item.scode_count,
            pledge_count: item.pledge_count,
            zy_sum: numberFormat(item.zy_sum),
            // under_warn_rate: item.under_warn_rate,
            // over_warn_rate: item.over_warn_rate,
            // pcx_rate: item.pcx_rate,
            under_warn_rate: Number(item.under_warn_rate*multiple).toFixed(2),
            over_warn_rate:  Number(item.over_warn_rate*multiple).toFixed(2),
            pcx_rate: Number(item.pcx_rate*multiple).toFixed(2),
          }));
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.border {
  border: 2px solid $border;
  border-radius: 6px;
}
.box {
  background: $bg;
  .head {
    background: $border;
    line-height: 34px;
    text-align: center;
    position: relative;
    .back {
      color: #aaadb2;
      font-size: 14px;
      font-weight: 400;
      padding-left: 14px;
      position: absolute;
      left: 0;
      cursor: pointer;
      &::before {
        content: "";
        position: relative;
        top: 1px;
        margin-right: 8px;
        display: inline-block;
        width: 8px;
        height: 12px;
        background: url($PIC_URL + "/tlbypcWeb/pledge/back.png") no-repeat
          center;
      }
    }
    .title {
      font-size: 18px;
      color: #ff4e39;
      font-weight: 400;
    }
  }
  .tag {
    line-height: 28px;
    background: $border;
    border: 1px solid $bg;
    span {
      color: #b3b3b3;
      display: inline-block;
      font-size: 14px;
      border-right: 1px solid $bg;
      padding: 0 18px;
      &.cur {
        background: #35497c;
        color: #ffffff;
      }
      &.item {
        padding: 0 15px;
        cursor: pointer;
      }
    }
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    // table-layout: fixed;
    td {
      padding: 8px 0;
    }
    thead {
      background: #1c1d21;
      td {
        border: 1px solid #323337;
        &.cur {
          cursor: pointer;
        }
        .icon {
          display: inline-block;
          width: 7px;
          height: 9px;
          margin-left: 5px;
          &.down {
            background: url($PIC_URL + "/tlbypcWeb/pledge/grid_arrow.png")
              no-repeat center;
          }
          &.up {
            background: url($PIC_URL + "/tlbypcWeb/pledge/grid_2.png") no-repeat
              center;
          }
        }
      }
    }
    tbody {
      td {
        border: 1px solid #25262a;
      }
      tr:nth-of-type(2n) {
        background: #111117;
      }
    }
  }
}
</style>
